<template>
  <div class="teacher-container">
    <filters :filter-form="filterForm" @getForm="getForm" />
    <div class="mytable">
      <mytable
        :show-index="true"
        :table-cols="tableCols"
        :table-data="tableData"
        @getOptions="getOptions"
      >
        <template #largeFaceUrl="{data}">
          <el-avatar :size="40" :src="data.largeFaceUrl">
            <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png">
          </el-avatar>
        </template>
      </mytable>
    </div>
    <div class="page">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="pageChage"
      />
    </div>
    <el-dialog title="主讲课程" :visible.sync="visible">
      <div class="major-class">
        <div v-for="(item, index) in curClass" :key="index" class="major-item" @click="gotoClass(item)">{{ item.name }}</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import filters from '@/components/filter/index'
import mytable from '@/components/mytable/index'

export default {
  components: {
    filters,
    mytable
  },
  data() {
    return {
      filterForm: [
        {
          type: 'text',
          title: '教师名字',
          placeholder: '请输入内容',
          key: 'teacherName'
        },
        {
          type: 'text',
          title: '所属学校',
          placeholder: '请输入内容',
          key: 'schoolName'
        }
      ],
      tableCols: [
        {
          label: '教师照片',
          prop: 'largeFaceUrl',
          expand: true
        },
        {
          label: '教师名字',
          prop: 'teacherName'
        },
        {
          label: '所属学校',
          prop: 'schoolName'
        },
        {
          label: '职称',
          prop: 'lectorTitle'
        },
        {
          label: '粉丝数量',
          prop: 'followedCount'
        },
        {
          label: '操作',
          slot: true,
          options: [
            {
              label: '主讲课程',
              key: 'relatedCourse'
            }
          ]
        }
      ],
      tableData: [],
      visible: false,
      curClass: [],
      total: 0,
      form: {}
    }
  },
  created() {
    this.getTeacherList()
  },
  methods: {
    // 获取教师列表
    async getTeacherList(params) {
      const res = await this.$api.getTeacherList(params)
      if (res && res.code === 200) {
        this.tableData = res.data.records
        this.total = res.data.totalCount
      }
    },
    getForm(form) {
      this.form = form
      this.getTeacherList(form)
    },
    pageChage(page) {
      const postData = {
        pageNo: page,
        ...this.form
      }
      this.getTeacherList(postData)
    },
    gotoClass(data) {
      console.log(data)
      this.$router.push({
        path: '/course/detail',
        query: {
          courseId: data.courseId
        }
      })
    },
    getOptions(data, key) {
      if (key === 'relatedCourse') {
        this.clickRelatedCourse(data)
      }
    },
    async clickRelatedCourse(data) {
      this.curClass = []
      const { teacherId } = data
      const res = await this.$api.getMajorClass(teacherId)
      if (res && res.code === 200) {
        this.curClass = res.data.records
        this.visible = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/mixin.scss';
.mytable{
  margin: 0 80px;
}
.major-class{
  line-height: 22px;
}
.page{
  padding: 20px 0;
  text-align: center;
}
.major-item{
  &:hover{
    color: #409EFF;
    cursor: pointer;
  }
}
::v-deep .el-dialog{
  @include boxCenter;
  margin-top: 0!important;
}
::v-deep .el-dialog__body{
  padding: 20px;
}
</style>
